@extends('plugin.hostserver.front.layout.base')
@section('add_css')
    <style>
        body {
            margin: 0;
            padding: 0;
            letter-spacing: .0625rem;
        }

        .container_base {
            width: 76rem;
            height: 135rem;
            margin: 1.6rem auto 2rem auto;
            margin-top: 20rem;
        }

        span.header {
            display: inline-block;
            width: 100%;
            height: 6.25rem;
            line-height: 6.25rem;
            text-align: center;
            font-size: 3.125rem;
            margin-bottom: 3rem;
            letter-spacing: .7rem;
            color: #333333;
        }

        u {
            text-decoration: none;
            border-bottom: .1875rem solid #69af07;
            padding: .625rem 0 .625rem .3125rem;
        }

        div.item {
            width: 100%;
            height: 29.875rem;
            margin-bottom: 3.25rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: center
        }

        .item:last-child {
            margin-bottom: 0;
        }

        div.item-box {
            display: inline-block;
            width: 16rem;
            margin-bottom: 3.25rem;
            margin-left: 1.1rem;
            overflow: hidden;
            box-shadow: 1px 1px 4px rgba(0, 0, 0, .2)
        }

        span.head {
            display: block;
            height: 5.9375rem;
            color: white;
            font-size: 1.875rem;
            line-height: 5.9375rem;
            text-align: center;
            background-color: #69af07;
        }

        div.content-box {
            margin: 0 auto;
            padding: 0 15px;
        }

        span.money {
            display: flex;
            flex-direction: column;
            justify-content: center;
            display: block;
            color: #69af07;
            padding: 15px 0 8px 0;
            height: 5rem;
        }

        .money div:first-child {
            width: 100%;
            height: 1.6rem;
            text-align: center;
        }

        .money div:nth-child(2) {
            width: 100%;
            height: 1.6rem;
            text-align: center;
        }

        .money div:nth-child(3) {
            width: 100%;
            height: 1.6rem;
            text-align: center;
        }

        span.time {
            display: flex;
            justify-content: space-between;
            font-size: .675rem;
            padding-bottom: .6rem;
        }

        span.time:after {
            content: '';
            height: 0;
            display: block;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

        span.fuwu {
            display: inline-block;
            width: 100%;
            height: 1.2rem;
            line-height: 1.2rem;
            text-align: center;
            font-size: .6rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        span.fuwu:after {
            content: '';
            height: 0;
            display: block;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

        .fuwu-box {
            width: 3.2rem;
            height: .2rem;
            margin-right: 1.5rem;
            display: flex;
        }

        .fuwu-box2 {
            width: 3.2rem;
            height: .2rem;
            margin-left: .75rem;
            display: flex;
        }

        .fuwu-box2 div:first-child {
            display: inline-block;
            width: 1.125rem;
            height: .375rem;
            vertical-align: middle;
            background-color: #69af07;
            border-radius: .625rem;
        }

        .fuwu-box2 div:last-child {
            display: inline-block;
            width: 3.25rem;
            height: .375rem;
            vertical-align: middle;
            background-color: #69af07;
            border-radius: .625rem;
            margin-left: .2rem;
        }

        .fuwu-box div:first-child {
            display: inline-block;
            width: 3.25rem;
            height: .375rem;
            vertical-align: middle;
            background-color: #69af07;
            border-radius: .625rem;
        }

        .fuwu-box div:last-child {
            display: inline-block;
            width: 1.125rem;
            height: .375rem;
            vertical-align: middle;
            background-color: #69af07;
            border-radius: .625rem;
            margin-left: .2rem;
        }

        .jindu {
            display: flex;
            display: inline-block;
            width: 100%;
            /* height: 2.75rem; */
            padding: 0.8rem 0 0 0;
            text-align: right;
            border-top: .0625rem solid black;
        }

        .jindu::after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
            clear: both;
        }

        .big-box {
            float: left;
            width: 9.5rem;
            height: .675rem;
            margin-top: .275rem;
            border-radius: .625rem;
            background-color: #e1e6dd;
        }

        .small-box {
            width: 7rem;
            height: .6rem;
            border-radius: .625rem;
            background-color: #69af07;
        }

        .bottom-box {
            text-align: center;
            display: flex;
            justify-content: center;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            padding: .6rem 0;
        }

        .bottom-box div.show {
            display: inline-block;
            vertical-align: top;
            font-size: .8rem;
            padding: .2rem;
            margin-top: .4rem;
        }

        .bottom-box div {
            display: none;
            border: .0625rem solid #ed060f;
            margin-left: .2rem;
            padding: .1rem;
            color: #ed060f;
        }

        .t {
            font-size: 1.5rem;
        }

        i {
            font-style: normal;
        }

        em {
            float: right;
            display: block;
            font-size: .8rem;
            font-style: normal;
            font-weight: normal;
        }

        .right {
            float: right;
            color: #69af07;
        }

        div.item-box:hover {
            transform: scale(1.1);
            transition: all .5s;
        }

        div.item-box {}

        @media screen and (max-width: 1480px) {
            body {
                /* background: #eee */
            }
            .money {
                font-size: 1.4rem;
            }
            div.item-box {
                width: 19rem;
            }
            .container_base {
                width: 82rem;
            }
            .big-box {
                width: 11.5rem;
            }
            .small-box {
                width: 9rem;
            }
            .fuwu {
                font-size: 1.1rem !important;
            }
        }
    </style>
@endsection
@section('content')
    <div class="container_base">
        <span class="header">基础<u>价</u>格表</span>
        <div class="item"></div>
    </div>
@endsection
@section('foot_js')
    <script type="text/javascript" src="plugin/hostserver/base_price/js/main.js"></script>
    <script src="plugin/hostserver/base_price/js/checkmobile.js"></script>
    <script src="plugin/hostserver/base_price/js/autosize.js"></script>
@endsection
